<template>
  <div class="changeBannerBox">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      class="changeBannerBox"
    >
      <el-form-item prop="bannerName">
        <span>banner名称：</span
        ><el-input v-model="ruleForm.bannerName"></el-input>
      </el-form-item>
      <el-form-item prop="bannerPicture">
        <span>banner上传：</span>
        <el-upload
          action="http://192.168.31.200:8081/banner/upload"
          ref="upload"
          list-type="picture-card"
          :file-list="fileList"
          :limit="bannerType == 'add' ? 1 : 2"
          :on-change="upload"
          :on-success="uploadSuccess"
          :http-request="uploadChange"
        >
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            />
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item prop="bannerLink">
        <span>banner链接：</span>
        <el-input v-model="ruleForm.bannerLink"></el-input>
      </el-form-item>
      <el-form-item prop="bannerTime">
        <span>显示时间：</span>
        <el-date-picker
          v-model="ruleForm.bannerTime"
          type="daterange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="bannerLocation">
        <span>显示位置：</span>
        <el-radio-group v-model="ruleForm.bannerLocation">
          <el-radio :label="1">首页头部</el-radio>
          <el-radio :label="2">首页解决方案</el-radio>
          <el-radio :label="3">集团新闻</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="bannerSort">
        <span>排序：</span> <el-input v-model="ruleForm.bannerSort"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  mounted () {
    if (this.bannerType == 'add') return
    this.ruleForm = this.bannerData
    this.fileList = [{ url: this.ruleForm.bannerPicture }]
    this.ruleForm.bannerTime = [this.ruleForm.bannerStartTime, this.ruleForm.bannerEndTime]
  },
  data () {
    var validatePass = (rule, value, callback) => {
      const rexg = /select|update|delete|truncate|join|union|exec|insert|drop|count|'|"|;|>|<|%/ig
      if (rexg.test(value)) {
        callback(new Error('内容包含敏感字段'))
      } else {
        callback()
      }
    };
    return {
      ruleForm: {
        bannerName: '',
        bannerLocation: 0,
        bannerTime: '',
        bannerSort: '',
        bannerPicture: '',
        bannerLink: '',
        bannerStartTime: '',
        bannerEndTime: "",
        bannerStatus: 0
      },
      //表单验证规则
      rules: {
        bannerName: [
          { required: true, message: '请输入banner名称', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        bannerLocation: [
          { required: true, message: '请输入显示位置', trigger: 'blur' },
        ],
        bannerLink: [
          { required: true, message: '图片链接不能为空', trigger: 'blur' },
        ],
        bannerSort: [
          { required: true, message: '排序不能为空', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        bannerTime: [
          { required: true, message: '显示时间不能为空', trigger: 'blur' }
        ],
        bannerPicture: [
          { required: true, message: '请上传图片', trigger: 'blur' }
        ],
      },
      fileList: [],
    }
  },
  methods: {
    upload (file, fileList) {
      this.fileList = [file]
    },
    async uploadChange (params) {
      const file = new FormData()
      file.append('file', params.file)
      const res = await this.$http.bannerUpload(file)
      return res
    },
    uploadSuccess (response, file, fileList) {
      // this.fileList = [file]
      this.ruleForm.bannerPicture = response
      this.ruleForm.bannerLink = response
    },
    async cancel () {
      this.$router.go(-1)
    },
    async save () {
      const flag = await this.$refs['ruleForm'].validate().catch(err => { });
      if (!flag) return
      const params = { ...this.ruleForm, bannerStartTime: this.ruleForm.bannerTime[0], bannerEndTime: this.ruleForm.bannerTime[1] }
      if (this.bannerType == 'add') {
        const { meta: { status, msg } } = await this.$http.addBanner(params)
        if (status !== 200) return this.$message.error('添加失败')
        this.$message.success('添加成功')
      } else {
        const { meta: { msg, status }, parameters } = await this.$http.editBanner(params)
        if (status !== 200) return this.$message.error(`修改失败`)
        this.$message.success(`修改成功`)
      }
      this.$router.push({
        path: '/bannerManage'
      })

    }
  },
  computed: {
    ...mapGetters(['bannerType', 'bannerData'])
  }
}
</script>
<style scoped lang="less">
.changeBannerBox {
  width: 100%;
  // height: 100%;
  .changeBannerBox {
    margin: auto;
    width: 633px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .el-form-item {
      width: 100%;
      span {
        width: 90px;
        display: flex;
        justify-content: flex-end;
      }
      /deep/ .el-form-item__content {
        display: flex;
        align-items: center;
        .el-input {
          width: 440px;
        }
        .el-form-item__error {
          left: 90px;
        }
      }
      &:last-child {
        display: flex;
        justify-content: center;
        margin-top: 20px;
        .el-button {
          margin: 0 30px;
        }
      }
    }
  }
}
</style>
